<template>
  <el-form :inline="true" :model="searchForm" class="demo-form-inline">
    <el-form-item label="员工编号">
      <el-input v-model="searchForm.employeeId" placeholder="员工编号" clearable />
    </el-form-item>
    <el-form-item label="员工姓名">
      <el-input v-model="searchForm.name" placeholder="员工姓名" clearable />
    </el-form-item>
    <el-form-item label="员工状态">
      <el-select v-model="searchForm.status" placeholder="员工状态" clearable>
        <el-option v-for="status in EmployeeStatus" :key="status.code" :label="status.label"
          :value="status.code"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="员工职位">
      <el-input v-model="searchForm.position" placeholder="员工职位" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="pageList">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="success" @click=EmployeeAdd>新增</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" :border="parentBorder" style="width: 100%">
    <el-table-column fixed prop="employeeId" label="员工编号" width="130" />
    <el-table-column prop="name" label="员工姓名" width="100" />
    <el-table-column prop="phone" label="联系方式" width="130" />
    <el-table-column prop="address" label="员工地址" width="140" />
    <el-table-column prop="status" label="员工状态" width="100">
      <template #default="scope">
        <span :style="{ color: getStatusLabel(scope.row.status).color }">
          {{ getStatusLabel(scope.row.status).label }}
        </span>
      </template>
    </el-table-column>
    <el-table-column prop="position" label="员工职位" width="120" />
    <el-table-column prop="driverLicense" label="驾驶证号" width="140" />
    <!-- <el-table-column prop="founder" label="创建人" width="80" /> -->
    <el-table-column prop="founderDate" label="创建时间" width="120" />
    <!-- <el-table-column prop="modifier" label="修改人" width="80" /> -->
    <el-table-column prop="modifierDate" label="修改时间" width="120" />
    <el-table-column fixed="right" label="操作" min-width="150">
      <template #default="scope">
        <el-button link type="danger" size="small" @click="handleClick(scope.row.id)">
          删除
        </el-button>
        <el-button link type="warning" size="small" @click="EmployeeList(scope.row.id)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="demo-pagination-block">
    <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[10, 15, 20, 25]"
      :size="size" :disabled="disabled" :background="background" layout="->, total, sizes, prev, pager, next"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>

  <el-drawer v-model="dialog" title="修改员工信息" direction="rtl" class="demo-drawer">
    <div class="demo-drawer__content">
      <el-form :model="form">
        <el-form-item label="员工编号" :label-width="formLabelWidth">
          <el-input v-model="form.employeeId" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="员工状态" clearable>
            <el-option v-for="status in EmployeeStatus" :key="status.code" :label="status.label" :value="status.code" />
          </el-select>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="员工职位" :label-width="formLabelWidth">
          <el-input v-model="form.position" autocomplete="off" />
        </el-form-item>
        <el-form-item label="驾驶证号" :label-width="formLabelWidth">
          <el-input v-model="form.driverLicense" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div class="demo-drawer__footer">
        <el-button @click="cancelForm">重置</el-button>
        <el-button type="primary" :loading="loading" @click="onClick">
          {{ loading ? '提交中 ...' : '提交' }}
        </el-button>
      </div>
    </div>
  </el-drawer>
  <div>

  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage, type ComponentSize } from 'element-plus'
import { useRouter } from 'vue-router';
import { employeePageList, selectList, updateEmployee, deleteEmployee } from '../api/employee.js'
import { EmployeeStatus } from '../utils/status.js';
const router = useRouter();

const form = reactive({
  employeeId: '',
  name: '',
  status: '',
  phone: '',
  address: '',
  position: '',
  driverLicense: '',
})

const formLabelWidth = '80px'
const dialog = ref(false)
const loading = ref(false)
const cancelForm = () => {
  loading.value = false
  dialog.value = false
  form.employeeId = '',
    form.name = '',
    form.status = '',
    form.address = '',
    form.position = '',
    form.driverLicense = ''
}
const onClick = async () => {
  try {
    const result = await updateEmployee(form);
    if (result.data.code === 200) {
      ElMessage.success(result.data.msg ? result.data.msg : '修改成功')
      loading.value = true
      setTimeout(() => {
        loading.value = false
        dialog.value = false
      }, 400);
      pageList()
    }else{
      ElMessage.error('修改失败，请检查修改信息是否符合规范')
    }
  }catch(error){
    ElMessage.error('修改失败，请检查修改信息是否符合规范')
  }
  dialog.value = false
}


const currentPage4 = ref(1)
const pageSize4 = ref(10)
const total = ref(0)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const EmployeeAdd = () => {
  router.push('/employee/add')
}

const handleSizeChange = (val: number) => {
  pageSize4.value = val;
  pageList();
};

const handleCurrentChange = (val: number) => {
  currentPage4.value = val;
  pageList();
};
const handleClick = async(id: number) => {
  try{
    const result = await deleteEmployee(id);
    if(result.data.code === 200){
      ElMessage.success(result.data.msg ? result.data.msg : '删除成功')
    }else{
      ElMessage.error('删除失败')
    }
  }catch(error){
    ElMessage.error('删除失败')
  }
}

const searchForm = reactive({
  employeeId: '',
  name: '',
  position: '',
  status: ''
})

const parentBorder = ref(false)
const tableData = ref([])

const pageList = async () => {
  const payload = {
    page: currentPage4.value,
    pageSize: pageSize4.value,
    employeeId: searchForm.employeeId,
    name: searchForm.name,
    position: searchForm.position,
    status: searchForm.status
  };
  console.log(payload)
  try {
    const result = await employeePageList(payload);
    console.log(result.data.data)
    if (result.data.code === 200) {
      total.value = result.data.data.total;
      tableData.value = result.data.data.recodes;
      ElMessage.success('员工列表')
    } else {
      ElMessage.error('未查询到任何信息')
    }
  } catch (error) {
    ElMessage.error('无法获取员工数据')
  }
}

const EmployeeList = async (id: number) => {
  dialog.value = true
  try {
    const result = await selectList(id);
    if (result.data.code === 200) {
      const data = result.data.data[0];
      Object.assign(form, data)
    } else {
      ElMessage.error('无法显示信息')
    }
  } catch (error) {
    ElMessage.error('后台数据出错')
  }
}

onMounted(() => {
  pageList()
})

const statusColorMap = {
  1: '#4caf50',  // Example status color
  0: '#ff9800',  // Example status color
  2: '#f44336',  // Example status color
  // Add more status colors here
}

const getStatusLabel = (status: number) => {
  const statusItem = EmployeeStatus.value.find(item => item.code === status);
  if(status === -1){
    status = 2
  }
  const color = statusColorMap[status] || '#000'  // Default to black if status not found
  return { label: statusItem ? statusItem.label : '未知', color }
};
</script>

<style scoped>
.demo-form-inline .el-input {
  width: 200px;
}

.demo-form-inline .el-select {
  width: 200px;
}

.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.type-status-class {
  color: #fff;
  padding: 3px 8px;
  border-radius: 10px;
  display: inline-block;
  width: 60px;
  text-align: center;
}

.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>